<template>
    <div>
        <a-input-search
            v-if="showSearch"
            style="margin-bottom: 8px"
            placeholder="请输入搜索+内容"
            @change="onChange"
        />
        <ATree
            v-bind="$attrs"
            :expanded-keys="expandedKeys"
            :auto-expand-parent="autoExpandParent"
            :default-expanded-keys="expandedKeys"
            :tree-data="treeData"
            :show-line="showLine"
            v-on="$listeners"
            @expand="onExpand"
            @select="select"
        >
            <template slot="title" slot-scope="{ title }">
                <span v-if="title.indexOf(searchValue) > -1">
                    {{ title.substr(0, title.indexOf(searchValue)) }}
                    <span style="color: #f50">{{ searchValue }}</span>
                    {{
                        title.substr(
                            title.indexOf(searchValue) + searchValue.length
                        )
                    }}
                </span>
                <span v-else>{{ title }}</span>
            </template>
        </ATree>
    </div>
</template>

<script>
import { useTreeBuildKeys } from "./hooks";
const { buildTreeKeys, getParentKey, generateList } = useTreeBuildKeys();
export default {
    props: {
        data: {
            type: Array,
            default: () => [],
        },
        defaultExpandedKeys: {
            type: Array,
            default: () => [],
        },
        fields: {
            type: Object,
            default: () => ({
                children: "children",
                title: "name",
                key: "id",
            }),
        },
        showSearch: {
            type: Boolean,
            default: true,
        },
        showLine: {
            type: Boolean,
            default: true,
        },
    },
    data() {
        return {
            expandedKeys: [],
            searchValue: "",
            autoExpandParent: true,
            treeData: [],
            dataList: [],
        };
    },
    watch: {
        data: {
            handler(newVal) {
                this.treeData = buildTreeKeys(newVal, this.fields);
                this.dataList = generateList(this.treeData);
            },
            deep: true,
            immediate: true,
        },
        defaultExpandedKeys: {
            handler(newVal) {
                this.expandedKeys = newVal;
            },
            deep: true,
            immediate: true,
        },
    },
    methods: {
        onExpand(expandedKeys) {
            this.expandedKeys = expandedKeys;
            this.autoExpandParent = false;
        },
        onChange(e) {
            const value = e.target.value;
            const expandedKeys = this.dataList
                .map((item) => {
                    if (
                        item.title && typeof item.title === "string"
                            ? item.title.indexOf(value) > -1
                            : item.title.toString().indexOf(value) > -1
                    ) {
                        return getParentKey(item.key, this.treeData);
                    }
                    return null;
                })
                .filter((item, i, self) => item && self.indexOf(item) === i);
            Object.assign(this, {
                expandedKeys,
                searchValue: value,
                autoExpandParent: true,
            });
        },
        select(selectedKeys) {
            this.$emit("select", selectedKeys);
        },
    },
};
</script>
